import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'index.dart';

class HomeHotPage extends GetView<HomeHotController> {
  const HomeHotPage({super.key});

  Widget _buildView() {
    return Container(
      color: Colors.black,
      child: CustomScrollView(
        slivers: [
          // 顶部安全区域 - 避免被AppBar挡住
          SliverToBoxAdapter(
            child: SizedBox(
              height: MediaQuery.of(Get.context!).padding.top + kToolbarHeight,
            ),
          ),
          
          // 轮播图区域
          SliverToBoxAdapter(
            child: _buildBanner(),
          ),
          
          // 最多观看/最多评论卡片
          SliverToBoxAdapter(
            child: _buildStatsCards(),
          ),
          
          // 热门分类标题
          SliverToBoxAdapter(
            child: _buildHotCategoryTitle(),
          ),
          
          // 热门分类标签网格
          SliverPadding(
            padding: EdgeInsets.symmetric(horizontal: 16.w),
            sliver: _buildCategoryGrid(),
          ),
        ],
      ),
    );
  }

  // 构建轮播图
  Widget _buildBanner() {
    return Container(
      margin: EdgeInsets.all(16.r),
      height: 180.h,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(12.r),
        gradient: const LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            Color(0xFF6B4FFF),
            Color(0xFFFF4F8E),
            Color(0xFFFF8C4F),
          ],
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10.r,
            offset: Offset(0, 4.h),
          ),
        ],
      ),
      child: Stack(
        children: [
          // 装饰性元素
          Positioned(
            right: -20.w,
            top: -20.h,
            child: Container(
              width: 150.w,
              height: 150.h,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white.withOpacity(0.1),
              ),
            ),
          ),
          Positioned(
            left: -30.w,
            bottom: -30.h,
            child: Container(
              width: 120.w,
              height: 120.h,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white.withOpacity(0.1),
              ),
            ),
          ),
          // 文字内容
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Icon(
                  Icons.live_tv_rounded,
                  color: Colors.white,
                  size: 48.r,
                ),
                SizedBox(height: 12.h),
                Text(
                  '热播直播',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 24.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 6.h),
                Text(
                  '礼物奇遇挑战赛',
                  style: TextStyle(
                    color: Colors.white.withOpacity(0.9),
                    fontSize: 16.sp,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建统计卡片（最多观看/最多评论）
  Widget _buildStatsCards() {
    return Padding(
      padding: EdgeInsets.symmetric(horizontal: 16.w),
      child: Row(
        children: [
          Expanded(
            child: _buildStatsCard(
              icon: Icons.play_circle_outline,
              iconColor: const Color(0xFFFF6B35),
              iconBgColor: const Color(0xFF2C2C2E),
              title: '最多观看',
              subtitle: '当年更多',
            ),
          ),
          SizedBox(width: 12.w),
          Expanded(
            child: _buildStatsCard(
              icon: Icons.chat_bubble_outline,
              iconColor: const Color(0xFF4F9FFF),
              iconBgColor: const Color(0xFF2C2C2E),
              title: '最多评论',
              subtitle: '当年更多',
            ),
          ),
        ],
      ),
    );
  }

  // 单个统计卡片
  Widget _buildStatsCard({
    required IconData icon,
    required Color iconColor,
    required Color iconBgColor,
    required String title,
    required String subtitle,
  }) {
    return Container(
      padding: EdgeInsets.all(16.r),
      decoration: BoxDecoration(
        color: const Color(0xFF1C1C1E),
        borderRadius: BorderRadius.circular(12.r),
        boxShadow: [
          BoxShadow(
            color: Colors.white.withOpacity(0.05),
            blurRadius: 8.r,
            offset: Offset(0, 2.h),
          ),
        ],
      ),
      child: Row(
        children: [
          Container(
            width: 48.w,
            height: 48.h,
            decoration: BoxDecoration(
              color: iconBgColor,
              borderRadius: BorderRadius.circular(12.r),
            ),
            child: Icon(
              icon,
              color: iconColor,
              size: 28.r,
            ),
          ),
          SizedBox(width: 12.w),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
              Text(
                title,
                style: TextStyle(
                  fontSize: 15.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 2.h),
              Text(
                subtitle,
                style: TextStyle(
                  fontSize: 12.sp,
                  color: Colors.grey[400],
                ),
              ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建热门分类标题
  Widget _buildHotCategoryTitle() {
    return Padding(
      padding: EdgeInsets.fromLTRB(16.w, 24.h, 16.w, 16.h),
      child: Row(
        children: [
          Icon(
            Icons.local_fire_department,
            color: const Color(0xFFFF6B35),
            size: 24.r,
          ),
          SizedBox(width: 6.w),
          Text(
            '热门分类',
            style: TextStyle(
              fontSize: 18.sp,
              fontWeight: FontWeight.bold,
              color: Colors.white,
            ),
          ),
        ],
      ),
    );
  }

  // 构建分类标签网格
  Widget _buildCategoryGrid() {
    final categories = [
      {'icon': '🍕', 'name': '#美食', 'count': 1, 'color': const Color(0xFF6B8EFF)},
      {'icon': '😄', 'name': '#搞笑', 'count': 1, 'color': const Color(0xFF6BFF8E)},
      {'icon': '🎨', 'name': '#潮牌', 'count': 11, 'color': const Color(0xFFFFB86B)},
      {'icon': '😊', 'name': '#甜美', 'count': 4, 'color': const Color(0xFFFF8E8E)},
      {'icon': '📷', 'name': '#自拍', 'count': 21, 'color': const Color(0xFF6BC5FF)},
      {'icon': '💬', 'name': '#其他', 'count': 1, 'color': const Color(0xFF9B8EFF)},
    ];

    return SliverGrid(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio: 2.5,
        crossAxisSpacing: 12.w,
        mainAxisSpacing: 12.h,
      ),
      delegate: SliverChildBuilderDelegate(
        (context, index) {
          final category = categories[index];
          return _buildCategoryItem(
            icon: category['icon'] as String,
            name: category['name'] as String,
            count: category['count'] as int,
            color: category['color'] as Color,
          );
        },
        childCount: categories.length,
      ),
    );
  }

  // 单个分类标签项
  Widget _buildCategoryItem({
    required String icon,
    required String name,
    required int count,
    required Color color,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFF1C1C1E),
        borderRadius: BorderRadius.circular(12.r),
        boxShadow: [
          BoxShadow(
            color: Colors.white.withOpacity(0.05),
            blurRadius: 8.r,
            offset: Offset(0, 2.h),
          ),
        ],
      ),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () {
            // TODO: 跳转到分类详情
          },
          borderRadius: BorderRadius.circular(12.r),
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 12.h),
            child: Row(
              children: [
                Container(
                  width: 44.w,
                  height: 44.h,
                  decoration: BoxDecoration(
                    color: const Color(0xFF2C2C2E),
                    borderRadius: BorderRadius.circular(10.r),
                  ),
                  child: Center(
                    child: Text(
                      icon,
                      style: TextStyle(fontSize: 24.sp),
                    ),
                  ),
                ),
                SizedBox(width: 12.w),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        name,
                        style: TextStyle(
                          fontSize: 15.sp,
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(height: 2.h),
                      Text(
                        '$count',
                        style: TextStyle(
                          fontSize: 12.sp,
                          color: Colors.grey[400],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<HomeHotController>(
      init: HomeHotController(),
      id: "home_hot",
      builder: (_) {
        return _buildView();
      },
    );
  }
}

